<div class="card mb-2">
  <div class="card-body">
    <h1 class="card-title text-center text-primary">Headings with h</h1>
    <h1>h1. The Age of Innocence</h1>
    <h2>h2. Gangs of New York</h2>
    <h3>h3. The Wolf of Wall Street</h3>
    <h4>h4. The Irishman</h4>
    <h5>h5. Killers of the Flower Moon</h5>
    <h6>h6. The Color of Money</h6>
  </div>
</div>
<div class="card mb-2">
  <div class="card-body">
    <h1 class="card-title text-center text-primary">Headings with p</h1>
    <p class="h1">h1. The King of Comedy</p>
    <p class="h2">h2. Raging Bull</p>
    <p class="h3">h3. New York, New York</p>
    <p class="h4">h4. Taxi Driver</p>
    <p class="h5">h5. Mean Streets</p>
    <p class="h6">h6. After Hours</p>
  </div>
</div>
<div class="card mb-2">
  <div class="card-body">
    <h1 class="card-title text-center text-primary">Display Headings</h1>
    <h1 class="display-1">Display 1</h1>
    <h1 class="display-2">Display 2</h1>
    <h1 class="display-3">Display 3</h1>
    <h1 class="display-4">Display 4</h1>
    <h1 class="display-5">Display 5</h1>
    <h1 class="display-6">Display 6</h1>
  </div>
</div>
<div class="card mb-2">
  <div class="card-body">
    <h1 class="card-title text-center text-primary">Inline Text Elements</h1>
    <p>You can use the mark tag to <mark>highlight</mark> text.</p>
    <p><del>This line of text is meant to be treated as deleted text.</del></p>
    <p><s>This line of text is meant to be treated as no longer accurate.</s></p>
    <p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
    <p><u>This line of text will render as underlined.</u></p>
    <p><small>This line of text is meant to be treated as fine print.</small></p>
    <p><strong>This line rendered as bold text.</strong></p>
    <p><em>This line rendered as italicized text.</em></p>
  </div>
</div>